<template>
  <div class="mySwitch">
    <el-switch
      :active-color="activeColor"
      :active-icon-class="activeIconClass"
      :active-text="activeText"
      :active-value="activeValue"
      :disabled="disabled"
      :inactive-color="inactiveColor"
      :inactive-icon-class="inactiveIconClass"
      :inactive-text="inactiveText"
      :inactive-value="inactiveValue"
      :name="name"
      :validate-event="validateEvent"
      :width="width"
      @change="change"
      v-model="childModel"
    >
    </el-switch>
  </div>
</template>

<script>

export default {
  name: 'mySwitch',
  props: {
    // 绑定值
    model: {
      type: [Boolean, String, Number],
      require: true
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default () {
        return false
      }
    },
    // switch 的宽度（像素）
    width: {
      type: Number,
      default () {
        return 40
      }
    },
    // switch 打开时所显示图标的类名，设置此项会忽略 active-text
    activeIconClass: {
      type: String
    },
    // switch 关闭时所显示图标的类名，设置此项会忽略 inactive-text
    inactiveIconClass: {
      type: String
    },
    // switch 打开时的文字描述
    activeText: {
      type: String
    },
    // switch 关闭时的文字描述
    inactiveText: {
      type: String
    },
    // switch 打开时的值
    activeValue: {
      type: [Boolean, String, Number],
      default () {
        return true
      }
    },
    // switch 关闭时的值
    inactiveValue: {
      type: [Boolean, String, Number],
      default () {
        return false
      }
    },
    // switch 打开时的背景色
    activeColor: {
      type: String,
      default () {
        return '#409EFF'
      }
    },
    // switch 关闭时的背景色
    inactiveColor: {
      type: String,
      default () {
        return '#C0CCDA'
      }
    },
    // switch 对应的 name 属性
    name: {
      type: String
    },
    // 改变 switch 状态时是否触发表单的校验
    validateEvent: {
      type: Boolean,
      default () {
        return true
      }
    },
    //  switch 状态发生变化时的回调函数
    change: {
      type: Function,
      default () {
      }
    }
  },
  data () {
    return {
      childModel: this.model
    }
  },
  watch: {
    childModel: function (val) {
      this.$emit('update:model', val)
    },
    model (val) {
      if (val !== this.childModel) {
        this.childModel = val
      }
    }
  },
  created () {
  },
  methods: {}
}

</script>

<style lang="scss">

</style>
